<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        body, html {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
        }  
  
        body {  
            /* 设置背景图像路径 */  
            background-image: url("./photo/背景.png");  
              
            /* 设置背景图像铺满整个容器 */  
            background-size: cover;  
              
            /* 设置背景图像始终位于容器的中心 */  
            background-position: center;  
              
            /* 设置背景图像不重复 */  
            background-repeat: no-repeat;  
              
            /* 固定背景图像，使页面内容滚动时背景图像保持固定 */  
            background-attachment: fixed;  
           
        }  
        h1{ text-align: center;
            font-size: 60px;
        }
        fieldset {  
           text-align: center;  /*居中 */
            width: 500px; /* 设置fieldset的宽度为300像素 */  
            border: 5px solid black; /* 可选：设置边框以便更清楚地看到fieldset的边界 */  
            padding: 10px; /* 可选：添加一些内边距 */  
            margin: 0 auto; /* 可选：使fieldset在页面上水平居中 */  
        }  
        .x{
             
            position: absolute;  
            top: 0;  
            right: 0;  
        }
        .y{   
            position: absolute;  
            top: 0;  
            left: 0;  

        }
        .room-display {
    display: none;
    margin-top: 20px;
  }
  .room-display img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 4px;
  }
  .book-now {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
  }
  .book-now:hover {
    background-color: #4cae4c;
  }

  /* 音乐按钮的样式 */
 .music-button {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('./photo/图层\ 2.png'); /* 音乐开启时的图标 */
    background-size: cover;
    cursor: pointer;
  }

  /* 当音乐暂停时的按钮样式 */
  .music-button.paused {
    background-image: url('./photo/图层\ 1.png'); /* 音乐关闭时的图标 */
  }
    </style>  
</head>  
<body>  

    <h1>时尚餐厅</h1>
    <br>
   
<br>
<strong>
<fieldset>  
    <div class="container">
  
  
        <div class="room-buttons">
          <button class="room-button" onclick="showRoom('standard')">标准间</button>
          <button class="room-button" onclick="showRoom('deluxe')">豪华间</button>
          <button class="room-button" onclick="showRoom('suite')">套间</button>
          <button class="room-button" onclick="showRoom('vip')">VIP间</button>
        </div>
      
        <div id="standard-room" class="room-display">
          <img src="./餐厅房间照片/u=2966835709,3599247680&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="标准间照片">
       
          <a href="./21预订表单.html"><button class="book-now" onclick="showForm()">确定预约</button></a>
        </div>
      
        <div id="deluxe-room" class="room-display">
          <img src="./餐厅房间照片/复古.jpg" alt="豪华间照片">
          <a href="./21预订表单.html"><button class="book-now" onclick="showForm()">确定预约</button></a>
        </div>
      
        <div id="suite-room" class="room-display">
          <img src="./餐厅房间照片/大众.jpg" alt="套间照片">
          <a href="./21预订表单.html"><button class="book-now" onclick="showForm()">确定预约</button></a>
        </div>
      
        <div id="vip-room" class="room-display">
          <img src="./餐厅房间照片/简约.jpg" alt="VIP间照片">
          <a href="./21预订表单.html"><button class="book-now" onclick="showForm()">确定预约</button></a>
        </div>
      
        <script>
          function showRoom(room) {
            // 隐藏所有房间显示
            document.querySelectorAll('.room-display').forEach(div => {
              div.style.display = 'none';
            });
            // 显示选中的房间
            document.getElementById(room + '-room').style.display = 'block';
          }
      
          function showForm() {
            // 显示预订表单
            document.getElementById('reservation-form').style.display = 'block';
            // 滚动到表单位置
            document.getElementById('reservation-form').scrollIntoView({ behavior: 'smooth' });
          }
        </script>
      </div>
</fieldset>  
</strong>

<div class="x">
<img src="./photo/笑脸.png" alt="" width="70px"height="70px">
<a href="./1主页面.html"><img src="./photo/退出登入.png" alt=""></a>
</div>
<a href="./5餐厅主页面 重做版.html"><img class="y" src="./photo/小房子.png" alt=""></a>

<!-- 音乐文件，默认设置为循环播放 -->
<audio id="backgroundMusic" src="./音乐/圈9 - 萤火飞光.mp3" loop autoplay preload="auto">
	您的浏览器不支持音频元素。
	</audio>
	
	<!-- 音乐开关按钮 -->
	<div class="music-button" onclick="toggleMusic()"></div>
</body>  
<script>
    function showRoom(room) {
      // 隐藏所有房间显示
      document.querySelectorAll('.room-display').forEach(div => {
        div.style.display = 'none';
      });
      // 显示选中的房间
      document.getElementById(room + '-room').style.display = 'block';
    }

    function showForm() {
      // 显示预订表单
      document.getElementById('reservation-form').style.display = 'block';
      // 滚动到表单位置
      document.getElementById('reservation-form').scrollIntoView({ behavior: 'smooth' });
    }
  </script>
  <SCript src="音乐.JS"></SCript> 
</html>